<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="节点" name="1">
      <el-row>
        <el-col :span="8"><el-text>Border Color</el-text></el-col>
        <el-col :span="14">
          <el-input type="color" v-model="globalGridAttr.nodeStroke" style="width: 100%" @input="onStrokeChange" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><el-text>Border Width</el-text></el-col>
        <el-col :span="12">
          <el-slider :min="1" :max="5" :step="1" v-model="globalGridAttr.nodeStrokeWidth" @input="onStrokeWidthChange" />
        </el-col>
        <el-col :span="2">
          <div class="result">{{ globalGridAttr.nodeStrokeWidth }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><el-text>Fill</el-text></el-col>
        <el-col :span="14">
          <el-input type="color" v-model="globalGridAttr.nodeFill" style="width: 100%" @input="onFillChange" />
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="文本" name="2">
      <el-row>
        <el-col :span="8"><el-text>Text Content</el-text></el-col>
        <el-col :span="14">
          <el-input type="textarea" v-model="globalGridAttr.nodeText" style="width: 100%" @input="onTextChange" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><el-text>Font Size</el-text></el-col>
        <el-col :span="12">
          <el-slider :min="8" :max="16" :step="1" v-model="globalGridAttr.nodeFontSize" @input="onFontSizeChange" />
        </el-col>
        <el-col :span="2">
          <div class="result">{{ globalGridAttr.nodeFontSize }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><el-text>Font Color</el-text></el-col>
        <el-col :span="14">
          <el-input type="color" v-model="globalGridAttr.nodeColor" style="width: 100%" @input="onColorChange" />
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="属性" name="3">
      <el-row>
        <el-col :span="8"><el-text>Assign Users</el-text></el-col>
        <el-col :span="14">
          <el-input v-model="globalGridAttr.nodeUsers" style="width: 100%" @input="onUsersChange" />
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { defineComponent, inject, watch, ref } from "vue";
import { Cell } from "@antv/x6";
import { nodeOpt } from "./method";

export default defineComponent({
  name: "Index",
  setup() {
    const activeTab = ref("1");
    const globalGridAttr: any = inject("globalGridAttr");
    const id: any = inject("id");
    let curCel: Cell;
    watch(
      [() => id.value],
      () => {
        curCel = nodeOpt(id, globalGridAttr);
      },
      {
        immediate: true,
        deep: false
      }
    );

    // 监听 nodeText 变化，同步更新节点文本
    watch(
      [() => globalGridAttr.nodeText],
      () => {
        curCel?.attr("text/text", globalGridAttr.nodeText);
      },
      {
        immediate: false,
        deep: false
      }
    );

    const onStrokeChange = () => {
      curCel?.attr("body/stroke", globalGridAttr.nodeStroke);
    };

    const onStrokeWidthChange = () => {
      curCel?.attr("body/strokeWidth", globalGridAttr.nodeStrokeWidth);
    };

    const onFillChange = () => {
      curCel?.attr("body/fill", globalGridAttr.nodeFill);
    };

    const onTextChange = () => {
      console.log(globalGridAttr.nodeText);
      curCel?.attr("text/text", globalGridAttr.nodeText);
    };

    const onFontSizeChange = () => {
      curCel?.attr("text/fontSize", globalGridAttr.nodeFontSize);
    };

    const onColorChange = () => {
      curCel?.attr("text/fill", globalGridAttr.nodeColor);
    };

    const onUsersChange = () => {
      curCel?.attr("approve/users", globalGridAttr.nodeUsers);
    };

    return {
      activeTab,
      globalGridAttr,
      onStrokeChange,
      onStrokeWidthChange,
      onFillChange,
      onTextChange,
      onFontSizeChange,
      onColorChange,
      onUsersChange
    };
  }
});
</script>

<style lang="scss" scoped></style>
